import { Transfer } from 'antd';
import React, { Dispatch, Key, SetStateAction } from 'react';
import { Parameter } from './types';

export interface ParameterTransferProps {
  parameters: Parameter[];
  targetKeys?: string[];
  setTargetKeys?: Dispatch<SetStateAction<string[]>>;
}

export function ParameterTransfer({
  parameters,
  targetKeys,
  setTargetKeys,
}: ParameterTransferProps) {
  const onChange = (nextTargetKeys: Key[]) => {
    setTargetKeys(nextTargetKeys as string[]);
  };

  return (
    <Transfer
      dataSource={parameters}
      targetKeys={targetKeys}
      onChange={onChange}
      render={({ label }) => label}
      locale={{
        itemUnit: '项',
        itemsUnit: '项',
        selectAll: '全选',
        deselectAll: '取消全选',
        selectInvert: '反选',
      }}
      titles={['模型参数', '设计表列']}
    />
  );
}
